<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script>
            // vue2只能对对象进行递归遍历的方法，去用getter和setter方法劫持到属性值的变化
            // vue2 只能监听对象里面的每一个属性，不能直接对 对象进行劫持
            // 并且监听不到新增和删除的对象属性，Vue.$set() Vue.$delete()方法可以解决
            // 并且监听不到数据下标和长度的变化
            // let person = {
            //     name: 'zs',
            //     age: 10,
            // };
            // let p = {};
            // Object.defineProperty(p, 'name', {
            //     get() {
            //         console.log('获取数据了');
            //         return person.name;
            //     },
            //     set(val) {
            //         console.log('数据更新了');
            //         person.name = val;
            //     },
            // });

            // vue3的双向绑定原理
            // 直接对整个对象进行监听
            let person = {
                name: 'zs',
                age: 20,
            };
            const p = new Proxy(person, {
                get(target, propName) {
                    return target[propName];
                },
                set(target, propName, value) {
                    target[propName] = value;
                },
                deleteProperty(target, propName) {
                    return delete target[propName];
                },
            });

            const p1 = new Proxy(person, {
                get(target, propName) {
                    return Reflect.get(target, propName);
                },
                set(target, propName, value) {
                    Reflect.set(target, propName, value);
                },
                deleteProperty(target, propName) {
                    return Reflect.defineProperty(target, propName);
                },
            });
        </script>
    </body>
</html>
